<template>
  <ul>
      <li v-for="message in messageList" :key="message.messageId">
        <!-- <a href="/message1">message001</a>&nbsp;&nbsp; -->
        <!--跳转路由并携带query参数，to的字符串写法 -->
        <!-- <router-link :to="`/home/message/detial?messageId=${message.messageId}&messageName=${message.messageName}`">{{message.messageName}}</router-link>&nbsp;&nbsp; -->
        <!--跳转路由并携带param参数，to的字符串写法,这种写法就需要将路由path和路由的参数做区分，所以路由配置中就需要在path上标注参数部分 如path:'flow/:newsId/:newsName' -->
        <!-- <router-link :to="`/home/message/detial/${message.messageId}/${message.messageName}`">{{message.messageName}}</router-link> -->
        <!--跳转路由并携带query参数，to的对象写法 -->
        <router-link :to="{
            path:'/home/message/detial',
            query:{
                messageId:message.messageId,
                messageName:message.messageName
            }
        }">{{message.messageName}}</router-link>&nbsp;&nbsp;

        <!--跳转路由并携带param参数，to的对象写法  注意传递param参数并且使用to的对象写法时，path必须配置成路由别名 xiangqing-->
         <!-- <router-link :to="{
            path:'xiangqing', 
            params:{
                messageId:message.messageId,
                messageName:message.messageName
            }
        }">{{message.messageName}}</router-link>&nbsp;&nbsp; -->

        <button @click = "pushShow(message)">PUSH展示</button>
        <button @click = "replaceShow(message)">REPLACE展示</button>
      </li>
      <router-view></router-view>
  </ul>
</template>

<script>
    export default {
        name:'Message',
        //获取菜单项的配置信息
        data:function(){
            return {
                messageList:[
                    {messageId:'001',messageName:'messageFlow1'},
                    {messageId:'002',messageName:'messageFlow2'},
                    {messageId:'003',messageName:'messageFlow3'},
                ]
            }
        },
        //router-link底层使用的是<a></a>标签，需要手动点击触发，不能自动跳转，使用编程式路由更加灵活
        //测试编程式路由导航，借助路由器直接操作路由跳转，更加灵活，
        //push和replace的区别是，push会在路由历史记录中添加一条记录，而replace会替换当前的路由记录
        methods:{
            pushShow(message){
                console.log(this.$router)
                this.$router.push({
                    path:'/home/message/detial',
                    query:{
                        messageId:message.messageId,
                        messageName:message.messageName
                    }
                })
            },
            replaceShow(message){
                this.$router.replace({
                    path:'/home/message/detial',
                    query:{
                        messageId:message.messageId,
                        messageName:message.messageName
                    }
                })
            }
        },
        beforeDestroy(){
            console.log('Message组件销毁前')
        }
    }
</script>

<style>

</style>